<template>
  <div id="newImg" class="page page-dog4">
    <!-- 背景 -->
    <div class="container-bg"><img :src="`./images/item_role_${$route.query.role}.jpg`" class="bg"></div>
    <!-- ui组 -->
    <div class="container-ui-group">
      <!-- 头像区 -->
      <div>
        <div class="container-header" :class="`container-header-${sex}`">
          <img :src="photo" class="header">
        </div>
        <div class="container-header-grid">
          <img :src="`./images/item_header_grid_${sex}.png`" class="item-header-grid">
        </div>
      </div>
      <!-- 昵称区 -->
      <div class="container-nickname">{{ nickname }}</div>
    </div>
    <!-- replay按钮 -->
    <div v-show="showBtn" class="container-btn-replay" @click="routerLink"><img src="@/assets/btn_replay.png" class="btn-replay"></div>
    <!-- 截图容器 -->
    <!-- <div ref="canvas" class="container-cut" /> -->
    <div v-show="imgData" ref="canvas" class="container-cut">
      <img :src="imgData" alt="">
    </div>
    <!-- 提示保存 -->
    <img v-if="miva" src="@/assets/tip_save.png" class="container-tip">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'
import { setTimeout } from 'timers'
export default {
  data() {
    return {
      showBtn: false,
      imgData: null,
      miva: true,
      nickname: ''
    }
  },
  created() {
    this.nickname = document.querySelector('.nick-name').innerHTML || ''
  },
  computed: {
    ...mapGetters([
      'photo'
      // 'nickname'
    ]),
    sex() {
      return this.$route.query.role < 3 ? 0 : 1
    }
  },
  mounted() {
    setTimeout(() => {
      this.miva = false
    }, 1800)
    setTimeout(() => {
      html2canvas(document.querySelector('#app'), {
        allowTaint: true
      }).then(canvas => {
        // document.body.appendChild(canvas)
        this.$refs.canvas.appendChild(canvas)
        var dataURL = canvas.toDataURL('image/png')
        this.imgData = dataURL
        this.showBtn = true
      })
    }, 2000)
  },
  methods: {
    routerLink() {
      this.$router.goTo(this, 'open')
    }
  }
}
</script>

<style lang="less">
.page-dog4 {
  .container-tip {
    width: 70%;
     position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
    .container-header-0 {
        left: calc(-3vw);
    }
    .container-ui-group {
        width: 80%;
        position: absolute;
        top:calc(20vw);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: space-around;
        .container-header {
            // width: calc(25vw);
            width: 90px;
            height: 90px;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
        }

        .container-header-grid {
            width: calc(30vw);
            position: absolute;
            top: 0;
            left: 0;
        }
        .container-nickname {
            width: 50%;
        }
    }
    .container-btn-replay {
        width: 30%;
        position: absolute;
        top: calc(135vw);
        left: 55%;
        z-index: 99999;
    }
    .container-cut {
        width: 100%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 10px solid #fff;
        canvas {
          display: none;
        }
        img {
          pointer-events: initial
        }
    }
}
</style>

